<script setup>
import { useForm } from '@/hooks/common/form';

defineOptions({ name: 'OrderSearch' })

const emit = defineEmits(['reset', 'search', 'export', 'purchase'])
const { formRef, validate, restoreValidation } = useForm();

const model = defineModel('model', { required: true })

const tagOptions = []
const statusOptions = []

async function reset(){
  await restoreValidation();
  emit('reset');
}

async function search(){
  await validate();
  emit('search')
}

function exports(){
  emit('exports')
}

function purchase(){
  emit('purchase')
}
</script>

<template>
  <ElCard class="card-wrapper">
    <ElForm ref="formRef" :model="model" label-position="right" :label-width="80">
      <ElRow :gutter="24">
        <ElCol :lg="6" :md="8" :sm="12">
          <ElFormItem :label="$t('page.order.orderNumber')" prop="orderNumber">
            <ElInput v-model="model.SearchContent" :placeholder="$t('page.order.form.orderNumber')" />
          </ElFormItem>
        </ElCol>
        <ElCol :lg="6" :md="8" :sm="12">
          <ElFormItem :label="$t('page.order.orderTime')" prop="tag">
            <ElDatePicker
                v-model="model.times"
                type="daterange"
                :start-placeholder="$t('page.store.form.start')"
                :end-placeholder="$t('page.store.form.end')"
              ></ElDatePicker>
          </ElFormItem>
        </ElCol>
        <ElCol :lg="12" :md="24" :sm="24">
          <ElSpace class="w-full justify-end" alignment="end">
            <ElButton @click="reset">
              <template #icon>
                <icon-ic-round-refresh class="text-icon" />
              </template>
              {{ $t('common.reset') }}
            </ElButton>
            <ElButton type="primary" plain @click="search">
              <template #icon>
                <icon-ic-round-search class="text-icon" />
              </template>
              {{ $t('common.search') }}
            </ElButton>
          </ElSpace>
        </ElCol>
        <ElCol>
          <ElSpace class="w-full" :size="30" alignment="end">
            <ElButton type="primary" @click="exports">
              <template #icon>
                <icon-ic-round-search class="text-icon" />
              </template>
              {{ $t('page.order.export') }}
            </ElButton>

            <ElButton type="primary" @click="purchase">
              <template #icon>
                <icon-ic-round-search class="text-icon" />
              </template>
              {{ $t('page.order.purchase') }}
            </ElButton>
          </ElSpace>
        </ElCol>
      </ElRow>
    </ElForm>
  </ElCard>
</template>

<style lang="scss" scoped>

</style>